<template>
  <div class="complaint-list sub-margin">
    <div class="sub-page-title">企业判定审批</div>
    <div class="conditions">
      <el-row>
        <el-col :span="19">
          <el-input
            class="search-input"
            @keyup.enter.native="onSearch"
            size="large"
            style="margin-right: 10px"
            v-model.trim="filtersVal.enterpriseName"
            clearable
            placeholder="请输入企业名称关键字"
            @clear="onSearch"></el-input>
          <el-input
            class="search-input"
            @keyup.enter.native="onSearch"
            size="large"
            v-model.trim="filtersVal.registerNumber"
            clearable
            placeholder="注册号/统一社会信用代码"
            @clear="onSearch"></el-input>
          <div class="search-item ml20">
            <div class="label-name">企业规模类型：</div>
            <el-radio-group v-model.trim="filtersVal.enterpriseType" @change="refreshList">
              <el-radio v-for="item in enterpriseTypeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </div>
          <div class="search-btn ml20">
            <el-button class="export-btn" type="primary" size="small" @click="onSearch">搜索</el-button>
            <el-button class="export-btn" type="primary" plain size="small" @click="onSearchReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="complaint-table">
      <div class="table-inner">
        <vxe-table :data="tableData" stripe border align="center" height="100%" auto-resize>
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column field="enterpriseName" title="企业名称" min-width="200"></vxe-column>
          <vxe-column field="registerNumber" title="注册号/统一社会信用代码" min-width="220"></vxe-column>
          <vxe-column field="establishDate" title="成立日期" width="150"></vxe-column>
          <vxe-column field="enterpriseType" title="企业类型" width="150"></vxe-column>
          <vxe-column field="registerCapital" title="注册资本（万元）" min-width="170"></vxe-column>
          <vxe-column field="industry" title="所属行业" min-width="170"></vxe-column>
          <vxe-column title="审批状态" width="100" #default="{ row }">
            <span :style="row.approvalStatus | statusStyleFilter">{{ row.approvalStatus | statusFilter }}</span>
          </vxe-column>
          <vxe-column field="approvalTime" title="审批时间" width="160"></vxe-column>
          <vxe-column title="操作" fixed="right" width="140" #default="{ row }">
            <el-button @click.native.prevent="onView(row, 'view')" type="text">查看</el-button>
            <el-button @click.native.prevent="onView(row)" type="text">
              {{ row.approvalStatus === '0' ? '审批' : '修改审批' }}
            </el-button>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <div class="pag-box">
      <pagination
        :current-page.sync="pageIdx"
        :page-size.sync="pageSize"
        :total="totalSize"
        @currentChange="onPageChange"></pagination>
    </div>
  </div>
</template>

<script>
import { listEnterprisePages } from '@api/modules/enterprise.js'
import pagination from '@com/pagination.vue'
import { APPROVE_STATUS } from '@utility/dict'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'JUDGAPPROVAL_LIST',
  components: {
    pagination,
  },
  data() {
    return {
      filtersVal: {
        enterpriseName: '',
        registerNumber: '',
        enterpriseType: '',
        dataType: '2', // 1企业名录 2企业判定审批 3企业名录维护
      },
      pageIdx: 1,
      pageSize: 10,
      totalSize: 0,
      tableData: [],
      enterpriseTypeList: [],
    }
  },
  filters: {
    statusFilter(status) {
      return APPROVE_STATUS[status] || ''
    },
    statusStyleFilter(status) {
      let style = ''
      switch (status) {
        case APPROVE_STATUS.tg:
          style = 'color: #006eff'
          break
        case APPROVE_STATUS.wsp:
          style = 'color: #fc6969'
          break
        case APPROVE_STATUS.bh:
          style = 'color: #fc6969'
          break
        default:
          break
      }
      return style
    },
  },
  computed: {
    ...mapGetters('publicCode', ['getCode']),
  },
  watch: {},
  created() {
    this.getPageData()
    this.getDictData()
  },
  methods: {
    ...mapActions('publicCode', ['getListDictData']),
    resetPage() {
      this.pageIdx = 1
    },
    onPageChange() {
      this.getPageData()
    },
    refreshList() {
      this.resetPage()
      this.getPageData()
    },
    onSearchReset() {
      this.filtersVal = JSON.parse(JSON.stringify({}))
      this.refreshList()
    },
    onSearch(data) {
      this.filtersVal = { ...this.filtersVal, ...data }
      this.refreshList()
    },
    getPageData() {
      listEnterprisePages({ ...this.filtersVal, current: this.pageIdx, size: this.pageSize }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    exportPageData() {
      // exportComplaintList({ userId: this.userId, ...this.filtersVal })
      this.$message('已开始下载，请耐心等候...')
    },
    // 添加、编辑
    onAddEdit({ id }) {
      this.$router.push({
        name: 'judgApprovalCreate',
        params: { id: id },
      })
    },
    // 查看
    onView({ id }, view) {
      this.$router.push({
        name: 'judgApprovalDetails',
        params: { id: id, view: view },
      })
      /* this.$router.push({
        name: 'judgAlgorithmCreate',
        params: { id: '111', view: '1' },
      }) */
    },
    async getDictData() {
      // 企业类型
      await this.getListDictData({ param: 'ENTERPRISE_TYPE' })

      const { ENTERPRISE_TYPE } = this.getCode
      this.enterpriseTypeList = [...ENTERPRISE_TYPE]
    },
  },
}
</script>

<style lang="scss" scoped>
.complaint-list {
  height: 100%;
  overflow: hidden;
  @include flex-y;
  .conditions {
    margin: 12px 0;
    .page-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .search-input {
      // margin-left: 20px;
      width: 250px;
    }
    .search-item {
      @include flex-x(center);
      .label-name {
        font-size: 14px;
        color: #606266;
        margin-right: 10px;
      }
    }
    .label {
      font-size: 16px;
      min-width: 80px;
      color: #666;
      margin-left: 5px;
    }

    ::v-deep .el-col {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-range-separator {
      width: auto;
    }
    .export-btn {
      font-size: 16px;
    }
  }
  .complaint-table {
    @include flex-1;
    position: relative;
    .table-inner {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
    .eva-content {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .delete-btn {
      color: #fc6969;
    }
  }
  .pag-box {
    padding: 0 4px;
    margin: 10px 0;
  }
}
</style>
